<style scoped>
  .menu-item span {
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }

  .menu-item i {
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }

  .collapsed-menu span {
    width: 0px;
    transition: width .2s ease;
  }

  .collapsed-menu i {
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
  }
</style>
<template>
  <div class="entryIndex">
    <div class="sta_title">
      <div class="goBack" @click="saveEntry">
        <Icon type="ios-arrow-back"/>
        <span class="gb_font">返回</span></div>
      <div class="st_font">
        <span class="stf_title">{{handleData.title}}</span>
      </div>
    </div>
    <div class="content">
      <!-- 富文本框 -->
      <div class="richText">
        <div id="wangeditor">
          <div ref="editorElem" style="text-align:left"></div>
        </div>
      </div>
      <footer>
        <Button type="primary" @click="submitClick">确认</Button>
        <Button @click="saveEntry">取消</Button>
      </footer>
    </div>
  </div>
</template>
<script>
  import cookie from 'js-cookie';
  import E from 'wangeditor'

  export default {
    name: 'handle',
    props: ['handleData'],
    data() {
      return {

      };
    },
    created() {
      window.document.title = 'SCS';
    },
    mounted() {
      let self = this
      this.createdEditor()
    },
    methods: {
      saveEntry() {
        let self = this
        self.$emit('save',1)
      },
      createdEditor() {
        var editor = new E(this.$refs.editorElem)        //创建富文本实例
        editor.customConfig.uploadImgServer = 'http://file.scs.cqapps.net/upload.php'
        editor.customConfig.uploadFileName = 'upload_file'
        editor.customConfig.menus = [          //菜单配置
          'image',  // 插入图片
          'video',  // 插入视频
          'list',  // 列表
          'justify',  // 对齐方式
          'link',  // 插入链接
        ]
        editor.customConfig.uploadImgParams = {
          server: 'item',
          from: 'wangeditor',
          domain: 'scs.cqapps.net'
        }
        //下面是最重要的的方法
        editor.customConfig.uploadImgHooks = {
          before: function (xhr, editor, files) {
            // 图片上传之前触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

            // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
            // return {
            //     prevent: true,
            //     msg: '放弃上传'
            // }
          },
          success: function (xhr, editor, result) {
            // 图片上传并返回结果，图片插入成功之后触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            this.imgUrl = Object.values(result.data).toString()
          },
          fail: function (xhr, editor, result) {
            // 图片上传并返回结果，但图片插入错误时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
          },
          error: function (xhr, editor) {
            // 图片上传出错时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
          },
          timeout: function (xhr, editor) {
            // 图片上传超时时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
          },

          // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
          // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
          customInsert: function (insertImg, result, editor) {
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

            // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
            let url = Object.values(result.data)      //result.data就是服务器返回的图片名字和链接
            JSON.stringify(url)    //在这里转成JSON格式
            insertImg(url)
            // result 必须是一个 JSON 格式字符串！！！否则报错
          }
        }
        editor.customConfig.onchange = (html) => {
          this.handleData.cont = html
        }
        editor.create()
        editor.txt.html(this.handleData.cont)
      },
      submitClick(){
        let self = this
        this.$Loading.start();
        let str = {}
        let url = ''
        if (self.handleData.isHand){ //会签
          str = {
            problem_id: self.handleData.problem_id,
            step: self.handleData.step,
            type: self.handleData.type,
            cont: self.handleData.cont,
            uid: cookie.get('uid')
          }
          url = '/item/trialsagree'
        } else { //审批修改
          str = {
            problem_id: self.handleData.problem_id,
            step: self.handleData.step,
            type: self.handleData.type,
            cont: self.handleData.cont,
            uid: cookie.get('uid')
          }
          url = '/item/applyagree'
        }
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + url, {alldata: strdata.alldata}).then((response) => {
          var res = this.$twjsdes.decrypt(response.data.alldata);
          this.$Loading.finish();
          self.$emit('save',1)
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
    },
  }
</script>
<style lang="less">
  .entryIndex {
    width: 79%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 0;
    top: 0;
    opacity: 10;
    background: #f4f4f4;
    padding: 0 16px;
    box-sizing: border-box;
    .sta_title {
      display: flex;
      flex-direction: row;
      justify-content: center;
      position: relative;
      margin: 16px 0;
      width: 100%;
      height: 36px;
      line-height: 36px;
      .goBack {
        display: flex;
        flex-direction: row;
        position: absolute;
        left: 0;
        top: 0;
        cursor: pointer;
        .ivu-icon {
          font-size: 20px;
          line-height: 36px;
        }
        .gb_font {
          font-size: 17px;
          color: #666666;
          line-height: 37px;
        }
      }
      .st_font {
        display: flex;
        flex-direction: row;
        .stf_title {
          font-size: 17px;
          color: #222222;
          margin-left: 50px;
          margin-right: 50px;
        }
      }
    }
    .content {
      display: flex;
      flex-direction: column;
      width: 100%;
      background: #f4f4f4;
      .selectDiv{
        padding: 16px;
        background: #fff;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        display: flex;
        flex-direction: column;
        .title{
          font-size: 13px;
          color: #666666;
          margin-bottom: 10px;
        }
        .select{
          z-index: 20000;
          margin-bottom: 10px;
          .blueL {
            color: #3384dd;
          }
          .yellowL {
            color: #f2ca51;
          }
          .orangeL {
            color: #ffb11b;
          }
          .redL {
            color: #f15c60;
          }
          .garyL {
            color: #cccccc;
          }
        }
        .tips{
          font-size: 12px;
          color: #999999;
        }
      }
      .richText {
        width: 100%;
        height: 340px;
        background: #fff;
        border: 1px solid #e5e5e5;
        border-top: none;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        margin-bottom: 16px;
      }
    }
    footer{
      width: 100%;
      height: 50px;
      background: #f9f9f9;
      position: absolute;
      bottom: 0;
      left: 0;
      border-top: 1px solid #e1e1e1;
      padding: 0 40px;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      button{
        margin-top: auto;
        margin-bottom: auto;
        margin-right: 10px;
        width: 70px;
        height: 30px;
      }
    }
  }
</style>

